<template>
    <div class="topbar">
        <div class="back">
            <i class="iconfont icon-arrow-left-bold" @click="onBack" v-show="isBackIcon" :style="{'color':color}"></i>
        </div>
        <div class="title">
            <span v-show="isTitleText" :style="{'color':Color}">{{title}}</span>
        </div>
        <div class="share">
            <i class="iconfont icon-elipsis" @click="onShare" v-show="isShareIcon"></i>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Topbar',
    props: {
        isBackIcon: {
            type: Boolean,
            default: false
        },
        color: {
            type: String,
            default: '#666'
        },
        title: {
            type: String
        },
        isTitleText: {
            type: Boolean,
            default: true
        },
        isShareIcon: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        onBack() {
            this.$store.commit('setAnimate','turn-off')
            this.$router.go(-1)
        },
        onShare() {
            this.$emit('onShare')
        }
    },
    computed: {
        Color() {
            return this.$store.state.colorItem[this.$store.state.colorIndex].color
        }
    }
}
</script>

<style scoped>
.topbar{
    display:flex;
    align-items: center;
    justify-content:space-between;
    height:0.9rem;
    padding:0 0.1rem;
    width:100%;
    border-bottom:1px solid #eee;
    background:#fff;
    position: fixed;
    top:0;
    left:0;
    z-index: 1;
}
.topbar .back{
    width:0.6rem;
    height:0.6rem;
    line-height:0.4rem;
}
.topbar .back .icon-arrow-left-bold{
    font-size:0.48rem;
}
.topbar .title{
    font-size:0.4rem;
    font-weight:700;
    letter-spacing:0.02rem;
}
.topbar .share{
    width:0.6rem;
    height:0.6rem;
    line-height:0.4rem;
}
.topbar .share .icon-elipsis{
    font-size:0.48rem;
    color:#666;
}
</style>